<template>
  <div class="findPd">
    <div class="nav">
      <Nav></Nav>
    </div>
    <div class="content">
      <div class="form_content">
        <div style="margin-left: 200px;margin-bottom: 20px;padding-top: 20px">
          <span style="font-size: 20px;font-weight: bold">找 回 密 码</span>
        </div>
        <div>
          <el-form :model="User" status-icon :rules="rules" ref="ruleForm" style="margin-left: 30px">
            <el-form-item label="请输入号码：" prop="phone" :label-width="formLabelWidth">
              <el-input style="width: 300px;" v-model="User.phone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="输入验证码：" prop="code" :label-width="formLabelWidth">
              <el-input style="width: 150px" v-model="User.code" autocomplete="off"></el-input>
              <el-button style="width: 150px" type="primary" :class="{'disabled-style':getCodeBtnDisable}"
                         :disabled="getCodeBtnDisable" @click="toGetCode()">{{codeBtnWord}}
              </el-button>
            </el-form-item>
            <div class="dialog-footer" style="margin-left: 130px">
              <el-button style="width: 200px" type="primary" @click.prevent="toSubmit()">确认</el-button>
            </div>
          </el-form>
        </div>
      </div>
    </div>
    <div class="footer">
      <Footer></Footer>
    </div>
  </div>
</template>

<script>
  import Nav from "../components/Nav";
  import Footer from "../components/Footer";

  export default {
    name: "FindPd",
    data() {
      const checkPhone = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('手机号不能为空'));
        } else {
          const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
          console.log(reg.test(value));
          if (reg.test(value)) {
            callback();
          } else {
            return callback(new Error('请输入正确的手机号'));
          }
        }
      };
      return {
        User: {
          phone: '',
          code: '',
        },
        codeBtnWord: '获取验证码', // 获取验证码按钮文字
        waitTime: 61, // 获取验证码按钮失效时间
        formLabelWidth: '120px',
        rules: {
          phone: [
            {required: true, message: '手机号不能为空', trigger: 'blur'},
            {validator: checkPhone, trigger: 'blur'}
          ],
          code: [
            {required: true, message: '验证码不能为空', trigger: 'blur'},
          ],
        }
      }
    },
    computed: {
      /*手机号验证*/
      phoneNumberStyle() {
        let reg = /^1[3456789]\d{9}$/
        if (!reg.test(this.User.phone)) {
          return false
        }
        return true
      },
      // 控制获取验证码按钮是否可点击
      getCodeBtnDisable: {
        get() {
          if (this.waitTime == 61) {
            if (this.User.phone) {
              return false
            }
            return true
          }
          return true
        },
        set(){

        }
      }
    },
    methods: {
      toGetCode() {
        if (this.phoneNumberStyle) {
          let _this = this
          // 调用获取短信验证码接口
          this.$axios.post("http://localhost:8088/user/sendMs/" + this.User.phone).then(res => {
            res = res.data
            let reg = /^\d{4}$/;
            if (reg.test(res)) {
              this.$message({
                message: '验证码已发送，请稍候...',
                type: 'success',
                center: true
              })
            }
          })
          // 因为下面用到了定时器，需要保存this指向
          let that = this
          that.waitTime--
          that.getCodeBtnDisable = true
          this.codeBtnWord = `${this.waitTime}s 后重新获取`
          let timer = setInterval(function () {
            if (that.waitTime > 1) {
              that.waitTime--
              that.codeBtnWord = `${that.waitTime}s 后重新获取`
            } else {
              clearInterval(timer)
              that.codeBtnWord = '获取验证码'
              that.getCodeBtnDisable = false
              that.waitTime = 61
            }
          }, 1000)
        }

      },
      toSubmit: function () {
        let _this = this
        console.log(_this.User)
        this.$axios.post("http://localhost:8088/user/register", _this.User).then(function (res) {
          alert(res.data)
          _this.$router.push({name:'UpdatePd',params:{phone:_this.User.phone}})
        }).catch(function (err) {
          alert("验证失败！请重试！")
        })
      }
    },
    components: {
      Nav,
      Footer
    },
    mounted() {
    }

  }
</script>

<style scoped>
  .el-button.disabled-style {
    background-color: #EEEEEE;
    color: #CCCCCC;
  }

  .form_content {
    height: 250px;
    width: 500px;
    margin-left: 520px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 1px 1px 10px gray;
  }

  .content {
    height: 460px;
    padding-top: 150px;
    background-color: rgba(228, 228, 228, 0.94);
  }
</style>
